<template>

    <div style="padding: 20px;">

        <!--我的邀约列表-->
        <el-form :inline="true" ref="form" :model="form" label-width="80px"
            style=" display: flex;flex-direction: column;">
            <div>
                <el-form-item label="任务名称" prop="qunfa_name">
                    <el-input placeholder="请输任务名称" v-model="form.qunfa_name" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="通知类型" prop="qunfa_type" >
                    <el-select v-model="form.qunfa_type" placeholder="请选择" size="mini">
                        <el-option label="常规通知" value="1"></el-option>
                        <el-option label="特别通知" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通知状态" prop="qunfa_status">
                    <el-select v-model="form.qunfa_status" placeholder="请选择" size="mini">
                        <el-option label="未发送" value="1"></el-option>
                        <el-option label="已发送" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">搜索</el-button>
                    <!--<el-button v-if="showAdd" size="mini" type="primary" @click="createPlan"
                               v-show="hasPermission('live:invitation:add')">创建群发计划1</el-button>-->
                    <el-button v-if="showAdd" size="mini" type="primary" @click="addPlan"
                               v-show="hasPermission('live:invitation:add')">创建群发计划</el-button>
                    <el-button size="mini" @click="resetForm('form')">重置</el-button>
                    <!-- <el-button @click="init()">刷新</el-button> -->
                </el-form-item>
            </div>
        </el-form>
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
                <el-table-column prop="title" label="任务名称"></el-table-column>
                <el-table-column prop="content_text" label="群发内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="type_ch" label="通知类型"></el-table-column>
                <el-table-column prop="time" label="通知时间"></el-table-column>
                <el-table-column prop="status_ch" label="通知状态(员工)"></el-table-column>
                <el-table-column prop="count" label="目标用户数"></el-table-column>
                <el-table-column prop="count_actual" label="实际目标数"></el-table-column>
                <el-table-column prop="count_sended" label="发送成功数"></el-table-column>
                <el-table-column prop="count_no_send" label="发送失败数"></el-table-column>
                <el-table-column prop="opa" label="操作" width='300'>
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" size="mini" style="width:40px !important;padding-left:8px;"
                            @click="copy(scope.row.id)">复制</el-button> 
                        <el-button @click="detail(scope.row.id)" type="success" size="mini" style="width:40px;padding-left:8px;">数据</el-button>
                        <el-button @click="edit_plan(scope.row.id)" type="info" size="mini" style="width:40px;padding-left:8px;">编辑</el-button>
                        <el-button @click="del(scope.row.id)" type="danger" size="mini" style="width:40px;padding-left:8px;">删除</el-button> -->
                        
                        <el-button type="primary" size="mini"
                            @click="copy(scope.row.id)">复制</el-button> 
                        <el-button @click="detail(scope.row.id)" type="success" size="mini" >数据</el-button>
                        <el-button @click="edit_plan(scope.row.id)" type="info" size="mini" >编辑</el-button>
                        <el-button @click="del(scope.row.id)" type="danger" size="mini" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total"> </el-pagination>
            </div>
        </div>
        <create-plan-form
            title="创建邀约计划"
            :visible="isCreatePlanForm"
            width="80%"
            @close="closeCreatePlanForm"
        />
    </div>

</template>


<script>
    import Panle from '@/components/Panle';
    import {
        getlist,
        copy_plan,
        del_plan,
        edit_plan,
    } from '@/api/scrm/qunfa/qunfa';
    import PersButton from '@/components/PersButton';
    import {
        hasPermission
    } from '@/common/permission';
    import createPlanForm from "@/views/scrm/qunfa/components/createPlanForm.vue";

    export default {
        components: {
            Panle,
            PersButton,
            createPlanForm
        },
        data() {
            return {
                loading: false,
                isCreatePlanForm: false,
                tableData: [],
                planlist: [],
                form: {
                    qunfa_name: '',
                    qunfa_type: '',
                    qunfa_status: '',

                    pageSize: 10,
                    pageNumber: 1,
                    total: 0
                },
                showAdd: true,
                renshu: 0,
                renshu_hav: 0,
                usernumbydate: [],
                usernumbydate_num: 0,
                copy_id:0,
            }
        },
        created() {
            // // 或者通过$route获取参数
            // console.log(this.$route.query.liveId);
            this.init();
            this.$watch(() => this.$route.path, () => {
                console.log('页面的路由是什么-----',this.$route.path);
                if (this.$route.path === '/live/invitation') {
                    // 刷新页面数据的方法
                    // this.refreshData();
                    console.log('刷新页面');
                    this.init();
                }
            });
        },
        activated() {
            // 在页面返回时数据刷新
            console.log('activated');
            this.init();

        },
        methods: {
            hasPermission,
            init() {
                this.loading = true;
                console.log('init开始:', this.form);
                getlist(this.form).then((res) => {
                    console.log(res);
                    this.tableData = res.data.list;
                    this.form.total = res.data.list_num
                    this.loading = false;
                })
            },
            copy(e) {
                console.log('我是数据的id===', this.copy_id = e);
                copy_plan(this.copy_id).then((res) => {
                    console.log(res);
                   this.init()
                    this.loading = false;
                })
            },
            del(e){
                //  console.log('我是数据的id===', this.copy_id = e);
                // del_plan(this.copy_id).then((res) => {
                //     console.log(res.data.flag);
                //     if(res.data.flag){
                //         this.$message({
                //                   message: '操作成功',
                //                   type: 'success'
                //                 });
                //     }
                //    this.init();
                //     this.loading = false;
                // })
                
                this.$confirm('确定删除吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                
                    del_plan(e).then((res) => {
                        console.log(res.data.flag);
                        if(res.data.flag){
                            this.$message({
                                      message: '操作成功',
                                      type: 'success'
                                    });
                        }
                       this.init();
                        this.loading = false;
                    })
                
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                
            },
            edit_plan(e){
              
               
               console.log('addinvitation');
                               this.$router.push({
                                   path: '/scrm/qunfa/editinvitation',
                                   query: {
                                       plan_id: e
                                   },
                });
            },
            detail(e){
       
               this.$router.push({
                   path: '/scrm/qunfa/detailinvitation',
                   query: {
                       plan_id: e
                   },
             });
            },
            search: function() {
                this.loading = true;
                this.form.pageSize = 10;
                this.form.pageNumber = 1;
                this.init();
            },
            handleSizeChange: function(e) {
                console.log(e);
                this.form.pageSize = e;
                this.init();
            },
            handleCurrentChange: function(e) {
                console.log(e);
                this.form.pageNumber = e;
                this.init();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.init();
            },
            createPlan() {
                // 打开创建计划弹窗
                this.isCreatePlanForm = true;
            },
            closeCreatePlanForm() {
                // 关闭创建计划弹窗
                this.isCreatePlanForm = false;
            },
            addPlan() {
                console.log('addinvitation');
                this.$router.push({
                    path: '/scrm/qunfa/addinvitation'
                });

            },
            clickjihua(id) {
                this.loading = true;
                this.planid = id;
                this.form.planid = id;
                this.init();
            },
            copytext(desc) {
                console.log(desc);
                const input = document.createElement('input');
                input.value = desc; // 获取要复制的文本
                document.body.appendChild(input);
                input.select(); // 选中文本
                document.execCommand('copy'); // 执行复制操作
                document.body.removeChild(input); // 移除临时的输入框
                // alert('文本已复制到剪贴板'); // 可选：给用户反馈
                this.$notify({
                    message: '文本已复制到剪贴板',
                    type: 'success'
                });
            }

        }
    }
</script>


<style lang="scss" scoped>
    .scroll-container {
        display: flex;
        margin-top: 10px;
        width: 100%;
        /* 设置容器宽度 */
        overflow-x: auto;
        /* 使得当内容宽度超过容器宽度时可以横向滚动 */
    }

    .content {
        display: flex;
        white-space: nowrap;
        /* 防止内容换行 */
        padding: 5px;
    }

    .line {
        width: 100%;
        height: 20px;
    }

    .plan_content {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .plan_content_item {
        /* width: 200px; */
        height: 120px;
        border-width: 1px;
        border-color: rgb(245, 247, 251);
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_content_item2 {
        /* width: 200px; */
        height: 120px;
        border-width: 1px;
        border-color: blue;
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_content_item3 {
        /* width: 200px; */
        height: 80px;
        border-width: 1px;
        border-color: rgb(245, 247, 251);
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_jishu {
        color: black;
        font-weight: bold;
        font-size: large;
    }

    .live_info_content {
        display: flex;
    }

    .live_info_img {
        width: 100px;
    }

    .info_content {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
    }

    .title_content {
        font-size: medium;
        font-weight: bold;
    }

    .shijian_content {
        font-size: medium;
    }

    .yaoyuejihua_label {
        font-size: medium;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 20px;
    }


    .live_content {
        display: flex;
        flex-direction: column;
    }
</style>